<template>
  <!-- 收入统计 => 公司 -->
  <div class="pages service-center">
    <div class="pageLevel" v-if="!sub">
      <!-- 头部 -->
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="服务商名称:" style="">
            <el-select v-model="selectdata.Name" size="small" placeholder="请选择服务商名称">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务商类型：" style="margin-left:30px">
            <el-select v-model="selectdata.serviceProviderTypeNumber" placeholder="服务商类型" style='width:200px' size='small' @change='selectChange'>
              <el-option label='全部' value=''></el-option>
              <el-option v-for='item in serviceProviderType' :label="item.serviceProviderTypeName" :value="item.serviceProviderTypeNumber" :key='item.serviceProviderTypeNumber'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务商等级：" style="margin-left:30px">
            <el-select v-model="selectdata.serviceProviderGradeNumber" placeholder="服务商等级" style='width:200px' size='small'>
              <el-option label='全部' value=''></el-option>
              <el-option v-for='item in serviceProviderGrade' :label="item.serviceProviderGradeName" :value="item.serviceProviderGradeNumber" :key='item.serviceProviderGradeNumber'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
            <el-button type="primary" @click="toPage" size="mini">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="total-income">
        <div class="all-income">
          分润金额 ：
          <span>{{payerName}}</span>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center">
          </el-table-column>
          <el-table-column prop="providerName" label="服务商名称" align="center">
          </el-table-column>
          <el-table-column prop="providerTypeName" label="服务商类型" align="center">
          </el-table-column>
          <el-table-column prop="providerGradeName" label="服务商等级" align="center">
          </el-table-column>
          <el-table-column prop="totalBenefitAmount" label="累计分润总额" align="center">
          </el-table-column>
          <el-table-column prop="benefitAmount" label="分润金额" align="center">
          </el-table-column>
          <el-table-column prop="cashAmount" label="已提现金额" align="center">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button size="small" v-if="setRole('服务商账单详情')" @click="routerPush('/financial-center/service-center/service-details',scope.row.providerType,scope.row.providerId,scope.row.providerGrade)" type="text" class="addDetail">详情</el-button>
              <el-button size="small" v-if="setRole('交易流水')" @click="routerPush('/financial-center/service-center/service-trading',scope.row.providerType,scope.row.providerId,scope.row.providerGrade)" type="text" class="addDetail">交易流水</el-button>
              <el-button size="small" v-if="setRole('提现记账')" @click="Service(scope.row)" type="text" class="addDetail">提现记账</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <el-dialog class="addshopname" title="提现记账" :visible.sync="dialogFormVisible" width="610px">
        <el-form :model="form" center>
          <el-form-item label="服务商名称 : " :label-width="formLabelWidth">
            <span>{{single.providerName}} </span>
          </el-form-item>
          <el-form-item label="分润金额 : " :label-width="formLabelWidth">
            <span>{{single.benefitAmount}} 元</span>
          </el-form-item>

          <el-form-item label="提现金额 : " :label-width="formLabelWidth">
            <sd-input :val.sync='form.cashAmount' placeholder="请输入提现金额" style="width:140px;float: left;"></sd-input>
            <!-- <el-input v-model="form.cashAmount" auto-complete="off" placeholder="请输入提现金额"></el-input> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="rechargeSure">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>

</template>
<script>
import {
  findProviderBillList,
  findServiceProviderTypeList,
  findServiceProviderGradeByTypeList,
  findInformationList,
  cashRecord
} from "@/api";
import sdInput from "@/components/SdInput";
import util from "@/util";
import u from "@/util/state";
import { mapState } from "vuex";
var fileDownload = require("js-file-download");
export default {
  components: { sdInput },
  computed: mapState(["merchantId", "sub", "power"]),
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      serviceProviderType: [], //服务商类型列表
      serviceProviderGrade: [], //服务商等级列表
      formLabelWidth: "120px",
      payerName: "",
      dialogFormVisible: false,
      tradeType: u.tradeType,
      value: [],
      single: {},
      status: "",
      name: "",
      pageSize: 20,
      total: 0,
      serviceNumber: "",
      currentPage: 1,
      selectdata: {
        Name: "",
        serviceProviderTypeNumber: "",
        serviceProviderGradeNumber: ""
      },
      form: {
        cashAmount: ""
      },
      tableData: [],
      options: [],
      optionGrade: [],
      optionType: [],
      sum: ""
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.getdata(20, 1);
    this.getServiceTypeList();
    this.findInformationList();
  },
  methods: {
    //服务商名称
    findInformationList() {
      let data = {
        shopId: this.merchantId
      };
      findInformationList(data).then(res => {
        if (res.code == 200) {
          this.options = res.data;
        } else {
          this.tips(res.msg, "error");
        }
      });
    },
    //服务商类型
    getServiceTypeList() {
      findServiceProviderTypeList().then(res => {
        if (res.code == 200) {
          this.serviceProviderType = res.data.list;
        } else {
          this.tips(res.msg, "error");
        }
      });
    },
    //服务商类型选择
    selectChange(val) {
      if (val) {
        this.getServiceGradeList(val);
      } else {
        this.serviceProviderGrade = [];
      }
      this.selectdata.serviceProviderGradeNumber = "";
    },
    //服务商等级
    getServiceGradeList(num) {
      let data = {
        serviceProviderTypeNumber: num
      };
      findServiceProviderGradeByTypeList(data).then(res => {
        if (res.code == 200) {
          this.serviceProviderGrade = res.data.list;
        } else {
          this.tips(res.msg, "error");
        }
      });
    },
    Service(row) {
      this.dialogFormVisible = true;
      this.single = row;
    },
    rechargeSure() {
      if (this.form.cashAmount > this.single.benefitAmount) {
        this.$message({
          type: "error",
          message: "提现金额不能大于分润金额"
        });
        return false;
      }
      if (this.form.cashAmount == "" || this.form.cashAmount == 0) {
        this.$message({
          type: "error",
          message: "提现金额应大于0"
        });
        return false;
      }
      let data = {
        shopId: this.merchantId,
        providerId: this.single.providerId,
        providerName: this.single.providerName,
        providerType: this.single.providerType,
        providerGrade: this.single.providerGrade,
        cashAmount: this.form.cashAmount
      };
      cashRecord(data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg
          });
          this.getdata(this.pageSize, this.currentPage);
          this.dialogFormVisible = false;
          this.form.cashAmount = "";
        }
      });
    },
    optionsType(val) {
      console.log(val);
      this.serviceNumber = val;
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //跳页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    getTime() {
      //---------------默认当前时间
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 1 && d <= 9) {
        d = "0" + d;
      }
      let time = y + "-" + m + "-" + d;
      this.value[0] = time;
      this.value[1] = time;
    },
    routerPush(name, Type, id, Grade) {
      util.routerTo(name, {
        Type: Type,
        id: id,
        Grade: Grade
      });
    },
    formatTimes: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    getdata(pageSize, pageNum) {
      if (!this.value) {
        this.value = ["", ""];
      }
      let postdata = {
        shopId: this.merchantId,
        findProviderId: this.selectdata.Name,
        findProviderType: this.selectdata.serviceProviderTypeNumber,
        findProviderGrade: this.selectdata.serviceProviderGradeNumber,
        type: this.selectdata.selects,
        pageNum: pageNum,
        pageSize: pageSize
      };
      findProviderBillList(postdata).then(res => {
        this.tableData = res.data.billList;
        this.payerName = res.data.benefitAmountSum;
        this.total = parseInt(res.data.pageTotal);
      });
    }
  }
};
</script>
<style>
.service-center .el-input__inner {
  height: 32px;
  line-height: 32px;
}
#app {
  text-align: inherit;
}
.service-center .total-income {
  color: #606266;
  width: 100%;
  line-height: 45px;
  font-size: 12px;
  font-weight: bold;
  margin: 14px 0px 2px 0px;
  border-top: 1px solid #eee;
}
.service-center .total-income .all-income {
  margin-left: 30px;
}
.service-center .total-income .all-income span {
  margin-left: 10px;
}
.service-center .tableSearch .el-select {
  width: 155px;
}
.service-center .span1 {
  color: red;
  margin-left: 100px;
  font-size: 14px;
  font-weight: bold;
}
</style>
